<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="index.css">
</head>

<body>

  点击任意位置来获取窗口坐标。
  <br> 这仅用于测试，用来检查你通过 JavaScript 获得的结果。
  <br>
  <div id="coords">(点击坐标显示在这里)</div>


  <div id="field">
    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
  </div>


  <div class="triangle-right" style="left:-20px;top:-176px">1</div>
  <div class="triangle-right" style="left:-10px;top:-178px">3</div>
  <div class="triangle-right" style="left:190px;top:-40px">4</div>
  <div class="triangle-right" style="left:200px;top:-42px">2</div>


  <script>
    document.onclick = function(e) { // shows click coordinates
      console.log(e, coords)
      coords.innerHTML = e.clientX + ':' + e.clientY;
    };
  </script>
  <script>
    const fieldEl = document.querySelector('#field')
    const elCoords = fieldEl.getBoundingClientRect()
    const fieldElBorderW = parseInt(getComputedStyle(fieldEl).borderWidth)

    const cX = elCoords.x
    const cY = elCoords.y
    const cR = elCoords.right
    const cB = elCoords.bottom

    const r1 = `${cX}:${cY}`
    console.log('r1', r1)
    const r3 = `${cX + fieldElBorderW}:${cY + fieldElBorderW}`
    console.log('r3', r3)
    const r2 = `${cR}:${cB}`
    console.log('r2', r2)
    const r4 = `${cR - fieldElBorderW}:${cB - fieldElBorderW}`
    console.log('r4', r4)

    console.log('coords', elCoords)

  </script>

</body>
</html>